/*
  学习目标：useState的基本使用
  语法: const [数据变量, 更新数变量的函数] useState(初始值)
  步骤：
     1. 导入useState函数
     
*/

import { useState } from 'react';

export default function App() {
  // count类似this.state.count

  // 2. 调用useState函数, 解构数组
  const [count, setCount] = useState(99);
  const [msg, setMsg] = useState('hello react');

  const handleAdd = () => {
    // setCount 类似this.setState({count: 新值})
    setCount(count + 1);
  };

  const handleAddMsg = () => {
    setMsg(msg + '~');
  };

  return (
    <>
      <h1>
        App - {count} - {msg}
      </h1>
      <button onClick={handleAdd}>点我+1</button>
      <button onClick={handleAddMsg}>点我+~</button>
    </>
  );
}
